<template>
  <div>
    <el-table
        :data="tableData"
        border
        style="width: 100%">

      <el-table-column
          fixed
          prop="orderId"
          label="OrderID"
          width="180">
      </el-table-column>
      <el-table-column
          prop="userId"
          label="UserID"
          width="100">
      </el-table-column>
      <el-table-column
          prop="email"
          label="Email"
          width="60">
      </el-table-column>
      <el-table-column
          prop="orderDate"
          label="OrderDate"
          width="110">
      </el-table-column>
      <el-table-column
          prop="shipAddress"
          label="ShipAddress"
          width="180">
      </el-table-column>

      <el-table-columnr
          prop="shipCity"
          label="ShipCity"
          width="180">
      </el-table-columnr>

      <el-table-column
          prop="shipState"
          label="ShipState"
          width="100">
      </el-table-column>
      <el-table-column
          prop="shipZip"
          label="ShipZip"
          width="80">
      </el-table-column>
      <el-table-column
          prop="shipCountry"
          label="ShipCountry"
          width="120">
      </el-table-column> <el-table-column
        prop="billAddress"
        label="BillAddress"
        width="180">
    </el-table-column>

      <el-table-column
        prop="billCity"
        label="BillCity"
        width="90">
    </el-table-column>

      <el-table-column
          prop="billState"
          label="BillState"
          width="80">
      </el-table-column>

      <el-table-column
          prop="billZip"
          label="BillZip"
          width="80">
      </el-table-column>

      <el-table-column
          prop="billCountry"
          label="BillCountry"
          width="100">
      </el-table-column>

      <el-table-column
          prop="courier"
          label="Courier"
          width="80">
      </el-table-column>

      <el-table-column
          prop="totalPrice"
          label="TotalPrice"
          width="95">
      </el-table-column>

      <el-table-column
          prop="billToFirstName"
          label="BillToFirstName"
          width="135">
      </el-table-column>

      <el-table-column
          prop="billToLastName"
          label="BillToLastName"
          width="135">
      </el-table-column>

      <el-table-column
          prop="shipToFirstName"
          label="ShipToFirstName"
          width="150">
      </el-table-column>

      <el-table-column
          prop="shipToLastName"
          label="ShipToLastName"
          width="150">
      </el-table-column>

      <el-table-column
          prop="creditCard"
          label="CreditCard"
          width="180">
      </el-table-column>

      <el-table-column
          prop="expiryDate"
          label="ExpiryDate"
          width="100">
      </el-table-column>

      <el-table-column
          prop="cardType"
          label="CardType"
          width="90">
      </el-table-column>

      <el-table-column
          prop="locale"
          label="Locale"
          width="80">
      </el-table-column>
      <el-table-column
          prop="status"
          label="Status"
          width="80">
      </el-table-column>



      <el-table-column
          fixed="right"
          label="操作"
          width="90">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="small">查看或修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--实现分页查询-->
    <el-pagination
        background
        layout="prev, pager, next"
        page-size="5"
        :total=counts
        @current-change="page">
    </el-pagination>
  </div>

</template>

<script>
export default {
  methods: {

    page(currentPage) {
      //alert(currentPage)
      const _this = this
      //此处需要查询item的全部信息
      axios({
        method: "GET",
        url: 'http://115.29.176.82:8081/manager/api/orders',
        params: {
          size: 5,
          page: currentPage
        }
      }).then(function (resp) {
        _this.tableData = (resp.data.data.list)
      })
    },

    edit(row) {
      this.$router.push({
        path:'/orderupdate',
        query:{
          orderId:row.orderId,
          email:row.email,
          userId:row.userId,
          orderDate:row.orderDate,
          shipAddress:row.shipAddress,
          shipCity:row.shipCity,
          shipState:row.shipState,
          shipZip:row.shipZip,
          shipCountry:row.shipCountry,
          billAddress:row.billAddress,
          billCity:row.billCity,
          billState:row.billState,
          billZip:row.billZip,
          billCountry:row.billCountry,
          courier:row.courier,
          totalPrice:row.totalPrice,
          billToFirstName:row.billToFirstName,
          billToLastName:row.billToLastName,
          shipToFirstName:row.shipToFirstName,
          shipToLastName:row.shipToLastName,
          creditCard:row.creditCard,
          expiryDate:row.expiryDate,
          cardType:row.cardType,
          locale:row.locale,
          status:row.status




        }
      })

    },


  },

  data() {
    return {
      counts:null,
      tableData: [{
        orderid :'1000',
        userid :'j2ee',
        orderdate :'2020-11-13',
        shipaddr1 :'901 San Antonio Road',
        shipaddr2 :'MS UCUP02-206',
        shipcity :'Palo Alto',
        shipstate :'CA',
        shipzip :'94303',
        shipcountry :'USA',
        billaddr1 :'901 San Antonio Road',
        billaddr2 :'MS UCUP02-206',
        billcity :'Palo Alto',
        billstate :'CA',
        billzip :'94303',
        billcountry :'USA',
        courier :'UPS',
        totalprice :'18.50',
        billtofirstname :'ABC',
        billtolastname :'XYX',
        shiptofirstname :'ABC',
        shiptolastname :'XYX',
        creditcard :'999 9999 9999 9999',
        exprdate :'12/03',
        cardtype :'Visa',
        locale :'CA'
      }]
    }
  },
  created() {
    const _this = this
    //此处需要查询item的全部信息
    axios({
      method:"GET",
      url:'http://115.29.176.82:8081/manager/api/orders',
      params:{
        size:5,
        page:1
      }
    }).then(function (resp){
      _this.counts=resp.data.data.count
      _this.tableData = (resp.data.data.list)
    })
  }
}
</script>